<template>
  <span>
    <slot name="before"></slot>
    <template v-if="!useNum">--</template>
    <span :class="className" v-else>
      {{ _.toNumber(num).toFixed(2) }}
      <slot name="after"></slot>
    </span>
  </span>
</template>
<script>
export default {
  name: 'numStock',
  mixins: [], //混入
  components: {}, //组件
  props: {
    num: {
      type: [Number, String],
    },
    useNum: {
      type: Boolean,
      default: function() {
        return true;
      },
    },
    useClassName: {
      type: Object,
      default: function() {
        return {};
      },
    },
  }, //集成属性
  data() {
    return {};
  },
  computed: {
    n: function() {
      return this._.toNumber(this.num).toFixed(2);
    },
    className: function() {
      if (Object.keys(this.useClassName).length > 0) {
        return this.useClassName;
      } else {
        return {
          'text-red': this.n > 0,
          'text-green': this.n < 0,
        };
      }
    },
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.text-red {
  color: red;
}
.text-green {
  color: green;
}
</style>
